<div class="main-section">
    <h1 class="main-section__title">Date picker</h1>

    <p class="main-section__intro">
        <code>lx-date-picker</code> is a directive that create a date picker. This date picker is managed by the <code>LxDatePickerService</code>.
    </p>

    <p class="main-section__warning">
        This component has been completly reworked since LumX beta version (v0.3.96).<br />Please refer to the updated documentation.
    </p>

    <lx-component lx-title="Basic usage" lx-path="/includes/modules/date-picker/includes/basic.html" lx-js-path="/js/date-picker/demo/demo-date-picker_controller.js">
        A callback function can be called with the selected date as parameter.
    </lx-component>

    <lx-component lx-title="Transcluded text field" lx-path="/includes/modules/date-picker/includes/input.html" lx-js-path="/js/date-picker/demo/demo-date-picker_controller.js">
        A text field can be transcluded to show the selected date according to the input format attribute.
    </lx-component>

    <lx-component-attributes>
        <table>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>lx-auto-close</td>
                    <td><code>boolean</code></td>
                    <td><code>true</code></td>
                    <td>Specify if the date picker should be closed when clicking outside.</td>
                </tr>
                <tr>
                    <td>lx-callback</td>
                    <td><code>function</code></td>
                    <td></td>
                    <td>The function called once a day is selected with the date object as parameter.</td>
                </tr>
                <tr>
                    <td>lx-color</td>
                    <td><code>string</code></td>
                    <td><code>primary</code></td>
                    <td>Define the date picker color. Options: colors defined in colors and sizes section in <code>dist/scss/core/settings/defaults.scss</code></td>
                </tr>
                <tr>
                    <td>lx-escape-close</td>
                    <td><code>boolean</code></td>
                    <td><code>true</code></td>
                    <td>Specify if the date picker should be closed with escape key.</td>
                </tr>
                <tr>
                    <td>lx-input-format</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Specify the text field date format (moment) when a text field component is transcluded.</td>
                </tr>
                <tr>
                    <td>lx-max-date</td>
                    <td><code>object</code></td>
                    <td></td>
                    <td>Set the max selectable date.</td>
                </tr>
                <tr>
                    <td>lx-min-date</td>
                    <td><code>object</code></td>
                    <td></td>
                    <td>Set the min selectable date.</td>
                </tr>
                <tr>
                    <td>lx-locale*</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Generate the calendar according to the given locale.</td>
                </tr>
                <tr>
                    <td>ng-model*</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Assignable angular expression to data-bind to.</td>
                </tr>
            </tbody>
        </table>
    </lx-component-attributes>

    <lx-component-methods lx-title="Service api">
        <lx-component-method lx-name="LxDatePickerService.open(datePickerId)" lx-description="Show a date picker according to its id.">
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>datePickerId*</td>
                        <td><code>string</code></td>
                        <td>The date picker id specified in the directive id attribute.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="LxDatePickerService.close(datePickerId)" lx-description="Close a date picker according to its id.">
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>datePickerId*</td>
                        <td><code>string</code></td>
                        <td>The date picker id specified in the directive id attribute.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>
    </lx-component-methods>

    <lx-component-methods lx-title="Events">
        <lx-component-method lx-name="lx-date-picker__open-start" lx-description="A broadcast is sent when date picker starts to appear.">
            <table>
                <thead>
                    <tr>
                        <th>Available parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>event</td>
                        <td><code>object</code></td>
                        <td>The broadcast original event.</td>
                    </tr>
                    <tr>
                        <td>datePickerId</td>
                        <td><code>string</code></td>
                        <td>The date picker id specified in the directive id attribute.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="lx-date-picker__open-end" lx-description="A broadcast is sent when date picker is opened.">
            <table>
                <thead>
                    <tr>
                        <th>Available parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>event</td>
                        <td><code>object</code></td>
                        <td>The broadcast original event.</td>
                    </tr>
                    <tr>
                        <td>datePickerId</td>
                        <td><code>string</code></td>
                        <td>The date picker id specified in the directive id attribute.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="lx-date-picker__close-start" lx-description="A broadcast is sent when date picker starts to disappear.">
            <table>
                <thead>
                    <tr>
                        <th>Available parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>event</td>
                        <td><code>object</code></td>
                        <td>The broadcast original event.</td>
                    </tr>
                    <tr>
                        <td>datePickerId</td>
                        <td><code>string</code></td>
                        <td>The date picker id specified in the directive id attribute.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="lx-date-picker__close-end" lx-description="A broadcast is sent when date picker is closed.">
            <table>
                <thead>
                    <tr>
                        <th>Available parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>event</td>
                        <td><code>object</code></td>
                        <td>The broadcast original event.</td>
                    </tr>
                    <tr>
                        <td>datePickerId</td>
                        <td><code>string</code></td>
                        <td>The date picker id specified in the directive id attribute.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>
    </lx-component-methods>
</div>